<template>
    <div style="margin-left: 20px;margin-top: 20px;margin-right: 20px">
        <!-- 搜索栏 -->
        <div style="margin: 10px 0">
            <el-input style="width: 200px" placeholder="请输入用户名" v-model="username"
                suffix-icon="el-icon-search"></el-input>
            <el-input style="width: 200px; margin-left: 5px" placeholder="请输入昵称" v-model="nickname"
                suffix-icon="el-icon-message" class=""></el-input>
            <el-input style="width: 200px;margin-left: 5px" placeholder="请输入地址" v-model="address"
                suffix-icon="el-icon-position"></el-input>
            <el-button style="margin-left: 5px" type="primary" @click="searchUser">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>

        <!-- 表格操作 -->
        <div style="margin: 10px 0">
            <el-button type="primary" @click="addUser">新增 <i class="el-icon-circle-plus-outline"></i></el-button>

            <!--带二次确认的删除-->
            <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info"
                icon-color="red" title="您确定删除这些数据吗？" @confirm="delBatch">
                <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>


            <el-upload action="http://localhost:9090/user/import" :show-file-list="false" accept="xlsx"
                :on-success="handleExcelImportSuccess" style="display: inline-block">
                <el-button type="primary" class="ml-5">导入
                    <i class="el-icon-bottom"></i>
                </el-button>
            </el-upload>
            <el-button type="primary" @click="exportUser" class="ml-5">导出
                <i class="el-icon-top"></i>
            </el-button>
        </div>

        <!--     弹窗新增/编辑用户         -->
        <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
            <el-form label-width="80px" size="small">
                <el-form-item label="用户名">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="地址">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveUser">确 定</el-button>
            </div>
        </el-dialog>


        <!-- 表格展示 -->
        <el-table :data="tableData" border stripe @selection-change="handleSelectionChange">
            <!--复选框-->
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
            <el-table-column prop="username" label="用户名" width="200" align="center"></el-table-column>
            <el-table-column prop="name" label="昵称" width="200" align="center"></el-table-column>
            <el-table-column prop="email" label="邮箱" width="200" align="center"></el-table-column>
            <el-table-column prop="phone" label="电话" width="200" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template v-slot="scope">
                    <el-button type="success" @click="updateUser(scope.row)">编辑
                        <i class="el-icon-edit"></i>
                    </el-button>
                    <!--带二次确认的删除-->
                    <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info"
                        icon-color="red" title="您确定删除吗？" @confirm="deleteUser(scope.row.id)">
                        <el-button type="danger" slot="reference">删除
                            <i class="el-icon-remove-outline"></i>
                        </el-button>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="padding: 10px 0">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request";
import axios from "axios";
axios.defaults.baseURL = 'http://localhost:9090/admin/system/sysUser'

export default {
    name: 'sysUser',
    data() {
        return {
            tableData: [],//表格数据
            //分页数据
            total: 0,//总条目数
            pageNum: 1,//当前在哪一页
            pageSize: 5,//一页展示条数
            //搜索栏数据
            username: "",
            nickname: "",
            address: "",
            //新增和更新
            form: {},//封装数据
            dialogFormVisible: false,//弹窗是否可见
            multipleSelection: [],//记录选择的条目
        }
    },
    created() {
        this.load();// 请求分页查询数据
    },
    methods: {
        load() {//请求数据
            axios.get("/page", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    username: this.username,
                    nickname: this.nickname,
                    address: this.address,
                }
            }).then(res => {
                console.log(res)
                this.tableData = res.data.records
                this.total = res.data.total
            })
        },
        handleSizeChange(pageSize) {//分页
            console.log(pageSize)
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum) {//分页
            console.log(pageNum)
            this.pageNum = pageNum
            this.load()
        },
        searchUser() {//搜索
            axios.get("/page", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    username: this.username,
                    nickname: this.nickname,
                    address: this.address,
                }
            }).then(res => {
                console.log(res)
                this.tableData = res.records
                this.total = res.total
            })
        },
        reset() {//重置
            this.username = ""
            this.email = ""
            this.address = ""
            this.load()
        },
        addUser() {//新增用户
            this.dialogFormVisible = true
            this.form = {}
        },
        saveUser() {//新增/编辑用户信息确认
            axios.post("", this.form).then(res => {
                if (res) {
                    this.$message.success("保存成功")
                    this.dialogFormVisible = false
                    this.load()//更新数据
                } else {
                    this.$message.error("保存失败")
                }
            })
        },
        updateUser(row) {//编辑用户
            this.form = row //将原先数据赋值到弹窗表格中
            this.dialogFormVisible = true
        },
        deleteUser(id) {//删除用户
            axios.delete("/" + id).then(res => {
                if (res) {
                    this.$message.success("删除成功")
                    this.load()//更新数据
                } else {
                    this.$message.error("删除失败")
                }
            })
        },
        handleSelectionChange(val) {//处理表格多选，记录选择的条目
            console.log(val)
            this.multipleSelection = val
        },
        delBatch() {//批量删除
            console.log(this.multipleSelection)
            const ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
            axios.delete("/del/batch", {
                data: ids
            }).then(res => {
                if (res) {
                    this.$message.success("批量删除成功")
                    this.load()//更新数据
                } else {
                    this.$message.error("批量删除失败")
                }
            })
        },
        exportUser() {//导出用户信息
            window.open("http://localhost:9090/user/export")
        },
        handleExcelImportSuccess() {//导入用户信息
            this.$message.success("导入成功")
            this.load()//更新数据
        }
    }
}
</script>
